<template>
  <!--模板-->
  <el-button type="" @click="changePerson">更改</el-button>
  <hr>
  liLei{{ liLei }}<br>
  <!--person：{{ person }}-->
</template>

 
<script setup lang="ts">
  import { reactive, ref, shallowReadonly, toRaw } from 'vue'

  const props = withDefaults(defineProps<{
    name: string,
    role: {
      name: string
    }
  }>(), {
    name: '我是正宗 props',
    role: () => {
      return {
        name: '楼上说的对'
      }
    }
  })
  
  // 第一部分
  const liLei = ref('我是李雷')

  const foo1 = reactive({
    name: '测试一下'
  })

  const foo2 = reactive({
    name: '测试一下'
  })

  const foo3 = reactive(toRaw(foo1))
  
  console.log('对比 foo1 foo2', foo1 === foo2) // 不等
  console.log('对比 foo1 foo3', foo1 === foo3) // 相等

  const myEmit = (value: string) => {
    liLei.value = value
  }

  // 第二部分
  const person = reactive({
    name: liLei.value,
    role: role
  })

  console.log('对比 role 和 person.role：', role === person.role)

  // 
  const changePerson = () => {
    // console.log(role)
     person.name = '改名'
    // person.role.name = '角色更名'
  }

  // 第三部分

  const myProps = shallowReadonly(person)

  const emit = (value: string) => {
    myEmit(value)
  }

  console.log('对比')
  console.log(myProps, props)

</script>